<template>
  <a-form :form="form" @submit="handleSubmit">
     <a-form-item v-bind="formItemLayout">
      <span slot="label">
        姓名
      </span>
      <a-input
        v-decorator="[
          'username',
          {
            rules: [{ required: true, message: '请输入姓名!', whitespace: true }],
            initialValue: data.username
          },
        ]"
      />
    </a-form-item>

     <a-form-item v-bind="formItemLayout">
      <span slot="label">
        年龄
      </span>
      <a-input
        v-decorator="[
          'age',
          {
            rules: [{ required: true, message: '请输入年龄!', whitespace: true }],
            initialValue: data.age
          },
        ]"
      />
    </a-form-item>

    <a-form-item v-bind="formItemLayout" label="Email">
      <a-input
        v-decorator="[
          'email',
          {
            rules: [
              {
                type: 'email',
                message: '输入的电子邮件无效!',
              },
              {
                required: true,
                message: '请输入您的电子邮件!',
              },
            ],
            initialValue: data.email
          },
        ]"
      />
    </a-form-item>

    <a-form-item v-bind="formItemLayout" label="手机号">
      <a-input
        v-decorator="[
          'phone',
          {
            rules: [
              {
                required: true,
                message: '请输入你的手机号!'
              },
              {
                validator: handleConfirmPass
              }
            ],
            initialValue: data.mobile
          },
        ]"
        style="width: 100%"
      >

      </a-input>
    </a-form-item>
    <a-form-item v-bind="tailFormItemLayout">
      <a-button type="primary" html-type="submit">
        保存
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  name: 'edit',
  data() {
    return {
      data: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'register' });
  },
  created() {
    // this.$http.post('/admin/user/examine', {user_id:this.$route.params.user_id}).then(function (response) {
        this.data =  {
          user_id: 'Xs12',
          username: '六',
          age: '24',
          email: '12@qq.com',
          mobile: '1530000000',
          key: 1
        }
    // })
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);

          // this.$http.post('/admin/user/edit', values).then(function (response) {
              this.$message.success('修改成功');
              this.$router.push({
              name: 'list'
            })
          // })
        }
      });
    },
    handleConfirmPass(rule,value, callback){
      if(value && !(/^1[3456789]\d{9}$/.test(value))){
        callback('输入的手机号无效!')
      }
      callback()
    },
  },
};
</script>
